<template lang="pug">
  div
    s-table.tabContent(
      ref="table"
      :column="tableObj.column"
      :filterProps="{items: filterItems}"
      :queryFn="tableObj.getList"
      title="疑似违规人员"
      )
      .table-operator(slot="table-operator")
        el-button(size="small" type="success" @click="addObj.visible = true") 新增
      template(slot="action" slot-scope="scope")
        a(href="javascript:" @click="addHandle(scope.id)") 编辑
        a.c_error(href="javascript:") 删除
    modal-form(
      width="720"
      :formItems="addItems"
      :visible.sync="addObj.visible"
      title="黑名单人员"
      :layoutCol="{sm: 12, md: 12, lg: 12}"
      :formSubmit="addSubmit"
    )
</template>
<script>
import { STable, ModalForm } from '@/components'
import { getPersonList } from '@/api/libary'

const column = [
  {
    prop: 'personId',
    label: '姓名'
  },
  {
    prop: 'name',
    label: '身份证',
    align: 'center'
  },
  {
    prop: 'reason',
    label: '原因'
  },
  {
    prop: 'signDate',
    label: '生效日期',
    align: 'center'
  },
  {
    prop: 'recogPic',
    label: '截止时限',
    align: 'center'
  },
  {
    prop: 'state',
    label: '当前状态',
    align: 'center'
  },
  {
    prop: 'action',
    label: '操作',
    align: 'center'
  }
]

export default {
  components: {
    STable,
    ModalForm
  },
  computed: {
    addItems () {
      const { info } = addObj
      return [
        {
          key: 'name',
          label: '姓名',
          disabled: !!this.id,
          rules: { required: true, message: '姓名不能为空', trigger: 'blur'},
          initialValue: info.name
        },
        {
          key: 'idcard',
          label: '身份证号码',
          disabled: !!this.id,
          initialValue: info.idcard || '',
          rules: [
            { required: true, message: '请输入', trigger: 'blur'},
            {pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '格式不正确', trigger: 'blur'}
          ]
        },
        {
          key: 'sex',
          label: '性别',
          type: 'radio',
          rules: { required: true, message: '请选择', trigger: 'blur'},
          options: this.dict.sex || [],
          initialValue: info.sex,
        },
        {
          key: 'birthday',
          label: '出生日期',
          type: 'date',
          rules: { required: true, message: '请选择', trigger: 'blur'},
          initialValue: info.birthday
        },
        {
          key: 'status',
          label: '当前状态',
          type: 'select',
          rules: { required: true, message: '请选择', trigger: 'blur'},
          options: this.dict.mtStatus || [],
          initialValue: info.status && info.status.toString(),
        },
        {
          key: 'startDate',
          label: '有效日期',
          type: 'date',
          rules: { required: true, message: '请选择', trigger: 'blur'},
          initialValue: info.startDate
        },
        {
          key: 'endDate',
          label: '截止日期',
          type: 'date',
          rules: { required: true, message: '请选择', trigger: 'blur'},
          initialValue: info.endDate
        },
        {
          key: 'remark',
          label: '原因',
          type: 'textarea',
          layoutCol: { sm: 24, md: 24, lg: 24},
          rules: { required: true, message: '请输入', trigger: 'blur'},
          initialValue: info.remark
        }
      ]
    }
  },
  data () {
    return {
      tableObj: {
        column,
        filterItems: [
          {
            key: 'keywords',
            label: '关键信息'
          },
          {
            key: 'status',
            label: '当前状态',
            type: 'select',
            options: []
          }
        ],
        getList: getPersonList
      },
      addObj: {
        visible: false,
        info: {},
        id: '',
        loading: false,
        submitting: false
      }
    }
  },
  methods: {
    addHandle (id) {
      this.addObj.visible = true
      this.addObj.id = id
    },
    addSubmit (vals) {
      console.log(vals)
    }
  }
}
</script>
